<%-- 
    Document   : manage_permissions
    Created on : 29 лют 2012, 22:46:19
    Author     : vlavrynovych
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script>
    var $dialogPermissions;
    var modalRights;

    $(document).ready(function() {
        $dialogPermissions = $("#addEditPermissionDialog");
        $("#blocksTable tr[parent] td:nth-child(3)").each(function() { 
            var $elem = $(this);
            $elem.parent().find("td input").attr("id", $($elem.html()).attr("id"));
            $elem.text($elem.html()); 
        });
        //check/uncheck all blocks when article title was checked/uncheked
        $(".documentArticleCheckBox").bind("click", function() {
            var $checkBox = $(this);
            var docId = $checkBox.parent().parent().attr("id");
            if($checkBox.attr("checked")) {
                $("tr[parent=" + docId + "] input").attr("checked", "true");
            } else {
                $("tr[parent=" + docId + "] input").removeAttr("checked");
            }
        });
        
        modalRights = {
            read: $("#read"),
            edit: $("#edit"),
            remove: $("#remove")
        }
    });
    
    function showAddEditPermissionDialog() {
        $dialogPermissions.modal();

        //sets title for modal dialog
        $dialogPermissions.find('#modalTitle').text("Add Permission");
    }
    
    function onCancelPermissionsModal(){
        $dialogPermissions.modal("hide");
    }
    
    function onOkPermissionsModal() {
        var blocksIds = new Array();
        var userIds = new Array();
        var roleIds = new Array();
        
        // gets block ids
        $("#docListTab input[id]:checked").each(function() {
            blocksIds.push($(this).attr("id"));
        });
        
        // checks count of blocks
        if(blocksIds.length==0) {
            onCancelPermissionsModal();
            Notifier.warning("Please, select at least one", "Document blocks were not selected!");
            return;
        }
        
        // gets user ids
        $("#userListTab input[id]:checked").each(function() {
            userIds.push($(this).attr("id"));
        });
        if(userIds.length==0) userIds.push(null);
        
        // gets role ids
        $("#roleListTab input[id]:checked").each(function() {
            roleIds.push($(this).attr("id"));
        });
        if(roleIds.length==0) roleIds.push(null);
        
        // checks count of users and roles
        if(userIds[0] == null && roleIds[0] == null){
            onCancelPermissionsModal();
            Notifier.warning("Please, select at least one", "No one user or group is selected!");
            return;
        }
        
        $.ajax({
            traditional: true,
            url: "set_permissions.html",
            data: {
                ids: blocksIds,
                read: modalRights.read.attr("checked") ? true : false,
                edit: modalRights.edit.attr("checked") ? true : false,
                remove: modalRights.remove.attr("checked") ? true : false,
                userIds: userIds,
                roleIds: roleIds
            },
            type: "POST",
            success: function(resultMsg) {
                if(resultMsg == "ok") {
                    Notifier.success("Permissions were successfully added.");
                } else {
                    Notifier.error(resultMsg, "Error!");
                }
            }
        });
        onCancelPermissionsModal();
    }
</script>
<div style="width: 94%; margin-left: 3%; margin-right: 3%">
    <fieldset>
        <form class="well form-inline">
            <span>
                <a class="btn btn-primary" onclick="showAddEditPermissionDialog()"><i class="icon-plus icon-white"></i> Add</a>
            </span>
        </form>
        
        <div class="row">
            
            <div class="tabbable tabs-below" style="width: 30%; display: inline-block">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#userListTab" data-toggle="tab">Users</a></li>
                    <li><a href="#roleListTab" data-toggle="tab">Roles</a></li>
                </ul>

                <div class="tab-content">
                    <!--User List-->
                    <div class="tab-pane active" id="userListTab">
                        <table class="table table-striped table-condensed table-bordered">
                            <thead>
                                <tr style="background-color: #666666; color: white">
                                    <th style="width: 10px"><i class="icon-check icon-white"></i></th>
                                    <th>Login</th>
                                    <th style="width: 250px">Email</th>
                                    <th style="width: 50px">Enabled</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${users}" var="user">
                                    <tr>
                                        <td><input id="${user.id}" type="checkbox"/></td>
                                        <td>${user.name}</td>
                                        <td>${user.email}</td>
                                        <td>${user.enabled}</td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>

                    <!--Role List-->
                    <div class="tab-pane" id="roleListTab">
                        <table class="table table-striped table-condensed table-bordered">
                            <thead>
                                <tr style="background-color: #666666; color: white">
                                    <th style="width: 10px"><i class="icon-check icon-white"></i></th>
                                    <th>Role Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${availableRoles}" var="role">
                                    <tr>
                                        <td><input id="${role.id}" type="checkbox"/></td>
                                        <td>${role.name}</td>
                                    </tr>
                                </c:forEach>    
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            
            <div class="tabbable tabs-below" style="width:65%; float:right;">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#docListTab" data-toggle="tab">Documents</a></li>
                </ul>

                <div class="tab-content">
                    
                    <div class="tab-pane active" id="docListTab">
                        
                        <table id="blocksTable" class="table table-striped table-condensed table-bordered">
                            <thead>
                                <tr style="background-color: #666666; color: white">
                                    <th style="width: 10px"><i class="icon-check icon-white"></i></th>
                                    <th style="width: 10px"><a rel="tooltip" title="Type"><i class="icon-pencil icon-white"></i></a></th>
                                    <th>Name</th>
                                    <th style="width: 100px">Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${documents}" var="doc">
                                    <tr id="${doc.key.id}">
                                        <td><input class="documentArticleCheckBox" type="checkbox"/></td>
                                        <td><a rel="tooltip" title="It is a document"><i class="icon-file"></i></a></td>
                                        <td><a target="_blank" href="./article/view/${doc.key.id}.html">${doc.key.title}</a></td>
                                        <td>${doc.key.creationDate}</td>
                                    </tr>
                                    <c:forEach items="${doc.value}" var="block">
                                        <tr parent="${doc.key.id}" style="color: #0044cc">
                                            <td><input type="checkbox"/></td>
                                            <td><a rel="tooltip" title="It is a section"><i class="icon-list-alt"></i></a></td>
                                            <td>${block}</td>
                                            <td></td>
                                        </tr>
                                    </c:forEach>
                                </c:forEach>
                            </tbody>
                        </table>
                        
                    </div>
                    
                </div>
            </div>
        </div>
        
    </fieldset>
</div>


<!-- Add permissions dialog section -->
<div id="addEditPermissionDialog" class="modal hide fade" style="display: table">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3 id="modalTitle"></h3>
        <p class="help-block">temp text</p>
    </div>
    
    <div class="modal-body form-horizontal">

        <div class="control-group">
            <label for="read" class="control-label">Read</label>
            <div class="controls">
                <input id="read" type="checkbox" />
                <p class="help-block">Can read document or section</p>
            </div>
        </div>
        
        <div class="control-group">
            <label for="edit" class="control-label">Edit</label>
            <div class="controls">
                <input id="edit" type="checkbox" />
                <p class="help-block">Can edit document or section</p>
            </div>
        </div>
        
        <div class="control-group">
            <label for="remove" class="control-label">Remove</label>
            <div class="controls">
                <input id="remove" type="checkbox" />
                <p class="help-block">Can remove document or section</p>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <a class="btn" onclick="$dialogPermissions.find('input').removeAttr('checked')"><i class="icon-remove-circle"></i> Clear</a>
        <input type="button" class="btn" onclick="onCancelPermissionsModal()" value="Cancel"/>
        <input type="button" class="btn btn-primary" onclick="onOkPermissionsModal()" value="Ok"/>
    </div>
</div>
<!-- Add permissions dialog section -->
